[鼠年全馬鐵人挑戰] Week20 - 超新手學前端 - JavaScript:監聽 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

[鼠年全馬鐵人挑戰] Week20 - 超新手學前端 - JavaScript:監聽

w3hexschool w3hexschool 鼠年全馬鐵人挑戰 javascript 監聽前端新手村

a841722 2020-06-21 18:17:16 ‧ 2900 瀏覽

分享至

嗨大家早安午安晚安
這周開始 JavaScript 的直播班了
發現自己吸收程度真的很慢很多都看不懂QQ
還好有提供直播錄影連結
可以把不懂的重複看到懂~

這周就來紀錄學到的監聽筆記吧:)

何謂監聽

監聽是指一個事件觸發時才會進行對應程式的執行，例如按下Click點擊、按下鍵盤、滑鼠移過去都是屬於監聽的範圍。
如果要用白話一點的形容就是，我已經準備好了就等你一句話!!!
就像男生跟女生求婚：我已經準備好要娶妳了，就等妳點頭了(羞>///<
已經準備好要執行了，就差觸發了。

監聽練習

監聽的語法是：
變數名稱.addEventListener('click', function);

<body>
  <input type="text" id="input">
  <button type="button" id="submit">增加資料</button>
  <ul id="list"></ul>

  <script>
    var input = document.querySelector('#input');
    var btn = document.querySelector('#submit');
    var list = document.querySelector('#list');
    btn.addEventListener('click', updateData)

    function updateData() {
      var text = input.value;
      input.value = '';
      input.focus(); //輸入後讓游標繼續在input輸入框
      // var string= '<li>' + text + '</li>'; 舊的寫法
      var liHtml = `<li>${text}</li>`;  //ES6的寫法
      list.innerHTML += liHtml; 
      // list.innerHTML = list.innerHTML + liHtml;
    }
  </script>
</body>>

由上面程式碼得知，這裡是寫了一個按鈕及輸入框，當使用者輸入任何字元在按下按鈕下面空白就會有字的產生：